.date-picker {
  box-sizing: content-box;
  width: 100%;
  border-radius: 12rpx 12rpx 0 0;
  background-color: #fff;
  transition: all 0.3s;

  &.open {
    transform: translateY(0);
  }

  .tops {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .arrow {
      width: 74rpx;
      height: 40rpx;
      background-size: 50rpx 50rpx;
      background-position: center;
      background-repeat: no-repeat;

      &.prev {
        background-image: url();
      }

      &.next {
        transform: rotate(180deg);
        background-image: url();
      }
    }

    .month {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .backccc {
    background: #ccc !important;
    box-shadow: none
  }

  .days {
    height: 420rpx;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0 37rpx;
    justify-content: center;

    .day {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-left: 28rpx;
      margin-bottom: 24rpx;
      text-align: center;
      font-size: 32rpx;
      line-height: 60rpx;
      font-weight: bold;
      position: relative;

      &:nth-child(7n+1) {
        margin-left: 0;
      }

      &.disabled {
        color: #8b95a6;
      }

      &.current {
        color: #ea231a;
      }

      &.hasdot {
        &::after {
          content: "";
          display: block;
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          background-color: #ea231a;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -4rpx;
        }
      }

      &.active {
        // background: linear-gradient(180deg, #FC7E33 0%, #FDAD3B 100%);
        // box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(252, 134, 52, 0.5);

        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(252, 134, 52, 0.5);
        background: linear-gradient(180deg, #F87949 0%, #E94709 100%);
        opacity: 1;
        color: #fff !important;
      }
    }
  }

  .halfday {
    text-align: center;
    font-size: 32rpx;
    color: #2286f8;
  }

  .btns {
    margin-top: 32rpx;
  }
}

page {
  background-color: #f5f5f5;
}

.models-box {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wid27 {
  width: 24%;
}

.marauto {
  /* margin-left: 2%;
	margin-right: 2%; */
}

.BGwhite {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.invertCfff {
  filter: brightness(0%) invert(1);
}

.width70px {
  width: 90px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 50px;
  height: 28px;
  line-height: 28px;
}

.lxbox1s {
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}

.day3 {
  
background: linear-gradient(180deg, #FA9D6A 0%, #F9894C 70%, #EA6228 100%);
  // background: linear-gradient(180deg, #FA9D6A 0%, #F9894C 70%, #EA6228 100%);
}

.day7 {
  
background: linear-gradient(180deg, #EA6A39 0%, #E94709 44%, #CD3D05 94%, #E94709 100%);
  // background: linear-gradient(180deg, #87ACFF 0%, #5A88F2 44%, #3459DB 94%, #3457D1 100%);
}

.boxs12 {
  width: 100%;

}

.day3,
.day7 {
  width: 42%;
}


.lj-sigin {
  width: 496rpx;
  height: 76rpx;

  background: linear-gradient(180deg, #E94709 0%, #E94709 100%);
  // background: linear-gradient(180deg, #E96D6A 0%, #E34039 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(227, 64, 57, 0.5);
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  letter-spacing: 2px;
  margin: 0 auto;
}